<template>
  <div class="supplement-detail-container">
    <!-- 产品信息表格 -->
    <el-card class="box-card" shadow="never" :bordered="false">
      <!-- 添加状态筛选区域 -->
      <div class="search-area" style="margin-bottom: 16px; padding: 10px 0">
        <span>状态筛选：</span>
        <el-select
          v-model="where.desAuditState"
          placeholder="全部状态"
          clearable
          size="small"
          style="width: 180px; margin-right: 10px"
          @change="handleSearch"
        >
          <el-option label="待审核" value="1"></el-option>
          <!-- <el-option label="审核通过" value="2,4,5,6,7,8"></el-option> -->
          <el-option label="审核拒绝" value="3"></el-option>
          <el-option label="已推送工厂" value="2,4,5,6,7,8,9"></el-option>
        </el-select>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        <el-button size="small" @click="handleReset">重置</el-button>
      </div>

      <!-- 移除产品列表表格上的ref和事件监听 -->
      <el-table v-loading="loading" :data="productList" style="width: 100%" size="small">
        <el-table-column prop="productDesignId" label="ID" width="60" />
        <el-table-column prop="productTitle" label="产品标题" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column prop="productPic" label="产品图" min-width="150">
          <template slot-scope="scope">
            <el-image
              v-for="(value, index) in scope.row.productPic"
              :key="index"
              :src="value"
              :preview-src-list="scope.row.productPic"
              style="width: 40px; height: 40px; cursor: pointer"
            />
          </template>
        </el-table-column>
        <el-table-column prop="threeViews" label="三视图" width="200">
          <template slot-scope="scope">
            <div style="display: flex; justify-content: space-around">
              <el-image
                v-if="scope.row.frontProductPic"
                :src="scope.row.frontProductPic"
                :preview-src-list="[scope.row.frontProductPic, scope.row.sideProductPic, scope.row.backProductPic]"
                style="width: 40px; height: 40px; cursor: pointer"
              />
              <el-image
                v-if="scope.row.sideProductPic"
                :src="scope.row.sideProductPic"
                :preview-src-list="[scope.row.sideProductPic, scope.row.frontProductPic, scope.row.backProductPic]"
                style="width: 40px; height: 40px; cursor: pointer"
              />
              <el-image
                v-if="scope.row.backProductPic"
                :src="scope.row.backProductPic"
                :preview-src-list="[scope.row.backProductPic, scope.row.frontProductPic, scope.row.sideProductPic]"
                style="width: 40px; height: 40px; cursor: pointer"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="产品尺寸" min-width="100">
          <template slot-scope="scope">
            长：{{ scope.row.length }}<br />宽：{{ scope.row.wide }}<br />高：{{ scope.row.high }}
          </template>
        </el-table-column>
        <el-table-column prop="productColour" label="颜色描述" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column prop="productTexture" label="产品材质" min-width="100" />
        <el-table-column prop="productPack" label="包装" min-width="80" />
        <el-table-column prop="productDetailedList" label="配件信息" min-width="100" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.productDetailedList" :key="index">
              {{ item }}
              <span v-if="index < scope.row.productDetailedList.length - 1">,</span>
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="desAuditState" label="状态" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.desAuditState == '1'">待审核</span>
            <span v-else-if="scope.row.desAuditState == '2'">已通过</span>
            <span v-else-if="scope.row.desAuditState == '3'">已驳回<br />驳回原因：{{ scope.row.desAuditRemark }}</span>
            <!-- <span v-else>{{ scope.row.desAuditState }}</span> -->
            <!-- <span v-else-if="scope.row.desAuditState == '4'">待报价</span> -->

            <span v-else>已推送工厂</span>
          </template>
        </el-table-column>

        <el-table-column prop="authorName" label="作者" min-width="100">
          <template slot-scope="scope">
            <span
              style="color: blue; cursor: pointer"
              v-if="scope.row.authorName"
              @click="handleClickPlayer(scope.row.authorName)"
              >{{ scope.row.authorName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <a @click="handleViewDetail(scope.row)">详情</a>
            <el-divider direction="vertical"></el-divider>
            <a @click="handleViewOriginalDetail(scope.row)">原创意详情</a>
            <el-divider v-if="scope.row.desAuditState == '1'" direction="vertical"></el-divider>
            <a v-if="scope.row.desAuditState == '1'" @click="handleReject(scope.row)">驳回</a>
            <el-divider v-if="scope.row.desAuditState == '1'" direction="vertical"></el-divider>
            <a v-if="scope.row.desAuditState == '1'" @click="openFactoryPriceDialog(scope.row)">工厂报价</a>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加产品列表分页 -->
      <div class="pagination-container" style="margin-top: 16px">
        <el-pagination
          background
          :current-page="where.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="where.limit"
          layout="total, prev, pager, next, jumper"
          :total="productListTotal"
          @size-change="handleProductSizeChange"
          @current-change="handleProductCurrentChange"
        />
      </div>
    </el-card>

    <!-- 工厂价弹窗 -->
    <el-dialog
      title="选择工厂报价"
      :visible.sync="factoryPriceDialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <!-- 搜索区域 -->
      <div class="search-area">
        搜索：
        <el-input
          v-model="factorySearchKeyword"
          placeholder="请输入工厂名称"
          prefix-icon="el-icon-search"
          clearable
          size="small"
          style="width: 300px; margin-right: 10px"
        />
        <el-button type="primary" size="small" @click="searchFactories"> 查找 </el-button>

        <div class="deadline-area">
          <span>报价截止时间：</span>
          <el-input v-model="deadlineDays" type="number" size="small" style="width: 80px; margin: 0 5px" min="1" />
          <span>天</span>
        </div>
      </div>

      <!-- 工厂列表 -->
      <div class="factory-list">
        <!-- 将ref和事件监听添加到工厂列表表格上 -->
        <el-table
          ref="factoryTable"
          v-loading="factoryListLoading"
          :data="factoryList"
          style="width: 100%"
          size="small"
          class="factory-table"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="工厂编号" width="100" />
          <el-table-column prop="name" label="工厂名称" min-width="180" />
          <el-table-column prop="realName" label="联系人" min-width="100" />
          <el-table-column prop="phone" label="电话" min-width="120" />
          <el-table-column prop="skilledField" label="擅长领域" min-width="120" />
          <el-table-column prop="cooperationNum" label="合作单数" width="100" />
          <!-- <el-table-column label="选择" width="80" fixed="right">
            <template slot-scope="scope">
              <el-checkbox v-model="selectedFactories[scope.row.factoryId]"></el-checkbox>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            background
            :current-page="factoryPage.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="factoryPage.limit"
            layout="total, prev, pager, next, jumper"
            :total="factoryListTotal"
            @size-change="handleFactorySizeChange"
            @current-change="handleFactoryCurrentChange"
          />
        </div>
      </div>

      <!-- 弹窗底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="factoryPriceDialogVisible = false">取消</el-button>
        <el-button style="margin-left: 100px !important" type="primary" @click="confirmSelection">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新增驳回原因弹窗 -->
    <el-dialog title="驳回原因" :visible.sync="rejectDialogVisible" width="400px" :close-on-click-modal="false">
      <el-input v-model="rejectReason" type="textarea" placeholder="请输入驳回原因" :rows="4" style="width: 100%" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReject">确定</el-button>
      </div>
    </el-dialog>

    <!-- 产品详情抽屉 -->
    <el-drawer
      title="产品详情"
      :visible.sync="detailDrawerVisible"
      direction="rtl"
      size="60%"
      :before-close="handleDetailClose"
    >
      <div v-if="currentDetailProduct" class="detail-content">
        <!-- 基本信息 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="detail-item">
                <label>产品ID：</label>
                <span>{{ currentDetailProduct.productDesignId }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>产品标题：</label>
                <span>{{ currentDetailProduct.productTitle }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>作者：</label>
                <span>{{ currentDetailProduct.author }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>状态：</label>
                <el-tag :type="getStatusTagType(currentDetailProduct.desAuditState)">
                  {{ getStatusText(currentDetailProduct.desAuditState) }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 产品图片 -->
        <el-card
          class="detail-card"
          shadow="never"
          v-if="currentDetailProduct.productPic && currentDetailProduct.productPic.length > 0"
        >
          <div slot="header" class="card-header">
            <span>产品图片</span>
          </div>
          <div class="image-gallery">
            <el-image
              v-for="(image, index) in currentDetailProduct.productPic"
              :key="index"
              :src="image"
              :preview-src-list="currentDetailProduct.productPic"
              class="product-image"
              fit="cover"
            />
          </div>
        </el-card>

        <!-- 三视图 -->
        <el-card
          class="detail-card"
          shadow="never"
          v-if="
            currentDetailProduct.frontProductPic ||
            currentDetailProduct.sideProductPic ||
            currentDetailProduct.backProductPic
          "
        >
          <div slot="header" class="card-header">
            <span>三视图</span>
          </div>
          <div class="three-views-gallery">
            <div v-if="currentDetailProduct.frontProductPic" class="view-item">
              <el-image
                :src="currentDetailProduct.frontProductPic"
                :preview-src-list="
                  [
                    currentDetailProduct.frontProductPic,
                    currentDetailProduct.sideProductPic,
                    currentDetailProduct.backProductPic,
                  ].filter(Boolean)
                "
                class="view-image"
                fit="cover"
              />
              <div class="view-label">正视图</div>
            </div>
            <div v-if="currentDetailProduct.sideProductPic" class="view-item">
              <el-image
                :src="currentDetailProduct.sideProductPic"
                :preview-src-list="
                  [
                    currentDetailProduct.sideProductPic,
                    currentDetailProduct.frontProductPic,
                    currentDetailProduct.backProductPic,
                  ].filter(Boolean)
                "
                class="view-image"
                fit="cover"
              />
              <div class="view-label">侧视图</div>
            </div>
            <div v-if="currentDetailProduct.backProductPic" class="view-item">
              <el-image
                :src="currentDetailProduct.backProductPic"
                :preview-src-list="
                  [
                    currentDetailProduct.backProductPic,
                    currentDetailProduct.frontProductPic,
                    currentDetailProduct.sideProductPic,
                  ].filter(Boolean)
                "
                class="view-image"
                fit="cover"
              />
              <div class="view-label">后视图</div>
            </div>
          </div>
        </el-card>

        <!-- 产品规格 -->
        <el-card class="detail-card" shadow="never">
          <div slot="header" class="card-header">
            <span>产品规格</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="detail-item">
                <label>产品尺寸：</label>
                <span
                  >长{{ currentDetailProduct.length }} × 宽{{ currentDetailProduct.wide }} × 高{{
                    currentDetailProduct.high
                  }}</span
                >
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>颜色描述：</label>
                <span>{{ currentDetailProduct.productColour }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="detail-item">
                <label>产品材质：</label>
                <span>{{ currentDetailProduct.productTexture }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>包装：</label>
                <span>{{ currentDetailProduct.productPack }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <label>配件信息：</label>
                <span v-if="Array.isArray(currentDetailProduct.productDetailedList)">
                  {{ currentDetailProduct.productDetailedList.join(', ') }}
                </span>
                <span v-else>{{ currentDetailProduct.productDetailedList || '无' }}</span>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 审核信息 -->
        <el-card class="detail-card" shadow="never" v-if="currentDetailProduct.desAuditRemark">
          <div slot="header" class="card-header">
            <span>审核信息</span>
          </div>
          <div class="detail-item">
            <label>驳回原因：</label>
            <span class="reject-reason">{{ currentDetailProduct.desAuditRemark }}</span>
          </div>
        </el-card>
      </div>
    </el-drawer>

    <!-- 原创意详情抽屉 -->
    <el-drawer
      title="原创意详情"
      :visible.sync="originalDetailDrawerVisible"
      direction="rtl"
      size="60%"
      :before-close="handleOriginalDetailClose"
    >
      <div v-loading="originalDetailLoading" class="detail-content">
        <div v-if="currentOriginalDetail">
          <!-- 基本信息 -->
          <el-card class="detail-card" shadow="never">
            <div slot="header" class="card-header">
              <span>基本信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <label>产品设计ID：</label>
                  <span>{{ currentOriginalDetail.productDesignId }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <label>产品标题：</label>
                  <span>{{ currentOriginalDetail.productTitle }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <label>笔记ID：</label>
                  <span>{{ currentOriginalDetail.noteId }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <label>审核状态：</label>
                  <el-tag :type="getStatusTagType(currentOriginalDetail.desAuditState)">
                    {{ getStatusText(currentOriginalDetail.desAuditState) }}
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <!-- 产品图片 -->
          <el-card
            class="detail-card"
            shadow="never"
            v-if="currentOriginalDetail.productPic && currentOriginalDetail.productPic.length > 0"
          >
            <div slot="header" class="card-header">
              <span>产品图片</span>
            </div>
            <div class="image-gallery">
              <el-image
                v-for="(image, index) in currentOriginalDetail.productPic"
                :key="index"
                :src="image"
                :preview-src-list="currentOriginalDetail.productPic"
                class="product-image"
                fit="cover"
              />
            </div>
          </el-card>

          <!-- 三视图 -->
          <el-card
            class="detail-card"
            shadow="never"
            v-if="
              currentOriginalDetail.frontProductPic ||
              currentOriginalDetail.sideProductPic ||
              currentOriginalDetail.backProductPic
            "
          >
            <div slot="header" class="card-header">
              <span>三视图</span>
            </div>
            <div class="three-views-gallery">
              <div v-if="currentOriginalDetail.frontProductPic" class="view-item">
                <el-image
                  :src="currentOriginalDetail.frontProductPic"
                  :preview-src-list="
                    [
                      currentOriginalDetail.frontProductPic,
                      currentOriginalDetail.sideProductPic,
                      currentOriginalDetail.backProductPic,
                    ].filter(Boolean)
                  "
                  class="view-image"
                  fit="cover"
                />
                <div class="view-label">正视图</div>
              </div>
              <div v-if="currentOriginalDetail.sideProductPic" class="view-item">
                <el-image
                  :src="currentOriginalDetail.sideProductPic"
                  :preview-src-list="
                    [
                      currentOriginalDetail.sideProductPic,
                      currentOriginalDetail.frontProductPic,
                      currentOriginalDetail.backProductPic,
                    ].filter(Boolean)
                  "
                  class="view-image"
                  fit="cover"
                />
                <div class="view-label">侧视图</div>
              </div>
              <div v-if="currentOriginalDetail.backProductPic" class="view-item">
                <el-image
                  :src="currentOriginalDetail.backProductPic"
                  :preview-src-list="
                    [
                      currentOriginalDetail.backProductPic,
                      currentOriginalDetail.frontProductPic,
                      currentOriginalDetail.sideProductPic,
                    ].filter(Boolean)
                  "
                  class="view-image"
                  fit="cover"
                />
                <div class="view-label">后视图</div>
              </div>
            </div>
          </el-card>

          <!-- 产品规格 -->
          <el-card class="detail-card" shadow="never">
            <div slot="header" class="card-header">
              <span>产品规格</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="detail-item">
                  <label>产品尺寸：</label>
                  <span
                    >长{{ currentOriginalDetail.length }} × 宽{{ currentOriginalDetail.wide }} × 高{{
                      currentOriginalDetail.high
                    }}</span
                  >
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>颜色描述：</label>
                  <span>{{ currentOriginalDetail.productColour }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>产品材质：</label>
                  <span>{{ currentOriginalDetail.productTexture }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>产品规格：</label>
                  <span>{{ currentOriginalDetail.productSize }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>包装：</label>
                  <span>{{ currentOriginalDetail.productPack || '无' }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="detail-item">
                  <label>配件信息：</label>
                  <span v-if="Array.isArray(currentOriginalDetail.productDetailedList)">
                    {{ currentOriginalDetail.productDetailedList.join(', ') }}
                  </span>
                  <span v-else>{{ currentOriginalDetail.productDetailedList || '无' }}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <!-- 审核信息 -->
          <el-card class="detail-card" shadow="never" v-if="currentOriginalDetail.desAuditRemark">
            <div slot="header" class="card-header">
              <span>审核信息</span>
            </div>
            <div class="detail-item">
              <label>审核备注：</label>
              <span class="reject-reason">{{ currentOriginalDetail.desAuditRemark }}</span>
            </div>
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  productSupplementAuditListApi,
  productSupplementRejectApi,
  productFactoryPriceApi,
  getOriginalDetailByNoteIdApi,
} from '@/api/product';
import * as merchant from '@/api/merchant';
import { checkPermi } from '@/utils/permission';

export default {
  name: 'SupplementDetail',
  components: {},
  props: {},
  data() {
    return {
      // 产品列表数据
      productList: [],
      loading: false,
      productListTotal: 0,
      // 工厂价弹窗相关
      factoryPriceDialogVisible: false,
      currentProduct: null,
      factorySearchKeyword: '',
      factoryList: [],
      factoryListLoading: false,
      factoryListTotal: 0,
      where: {
        page: 1,
        limit: 10,
        desAuditState: null, // 添加状态筛选参数
      },
      factoryPage: {
        page: 1,
        limit: 10,
      },
      // 新增字段
      deadlineDays: 3,
      selectedFactories: {},
      // 添加缺失的变量定义
      multipleSelection: [],
      // 新增驳回相关变量
      rejectDialogVisible: false,
      rejectReason: '',
      rejectProduct: null,
      // 详情抽屉相关变量
      detailDrawerVisible: false,
      currentDetailProduct: null,
      // 原创意详情抽屉相关变量
      originalDetailDrawerVisible: false,
      currentOriginalDetail: null,
      originalDetailLoading: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadProductList();
  },
  mounted() {},
  methods: {
    // 查看详情
    handleViewDetail(product) {
      this.detailDrawerVisible = true;
      this.currentDetailProduct = product;
    },

    // 去选手列表
    handleClickPlayer(name) {
      this.$router.push({
        path: '/marketing/community/player',
        query: {
          playerName: name,
        },
      });
    },
    // 查看原创意详情
    handleViewOriginalDetail(product) {
      if (!product.noteId) {
        this.$message.warning('该产品没有关联的原创意信息');
        return;
      }

      this.originalDetailDrawerVisible = true;
      this.originalDetailLoading = true;
      this.currentOriginalDetail = null;

      getOriginalDetailByNoteIdApi(product.noteId)
        .then((res) => {
          this.currentOriginalDetail = res.data || res;
          // 处理图片字段，确保是数组格式
          if (this.currentOriginalDetail.productPic && typeof this.currentOriginalDetail.productPic === 'string') {
            this.currentOriginalDetail.productPic = this.currentOriginalDetail.productPic.split(',');
          }
          this.originalDetailLoading = false;
        })
        .catch((err) => {
          console.error('获取原创意详情失败:', err);
          this.$message.error('获取原创意详情失败，请重试');
          this.originalDetailLoading = false;
          this.originalDetailDrawerVisible = false;
        });
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        1: '待审核',
        2: '已通过',
        3: '已驳回',
        4: '待报价',
        8: '已完成',
      };
      return statusMap[status] || `状态${status}`;
    },

    // 获取状态标签类型
    getStatusTagType(status) {
      const typeMap = {
        1: 'warning',
        2: 'success',
        3: 'danger',
        4: 'info',
        8: 'success',
      };
      return typeMap[status] || 'info';
    },

    // 关闭详情抽屉
    handleDetailClose() {
      this.detailDrawerVisible = false;
      this.currentDetailProduct = null;
    },

    // 关闭原创意详情抽屉
    handleOriginalDetailClose() {
      this.originalDetailDrawerVisible = false;
      this.currentOriginalDetail = null;
      this.originalDetailLoading = false;
    },

    // 加载产品列表数据
    loadProductList() {
      productSupplementAuditListApi(this.where)
        .then((res) => {
          console.log('res', res);
          this.productList = res.list || [];
          this.productList.forEach((item) => {
            item.productPic = item.productPic ? item.productPic.split(',') : [];
          });
          // 更新产品总条数
          this.productListTotal = res.total || 0;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.productList = [];
        });
      this.loading = true;
    },
    // 产品列表分页处理
    handleProductSizeChange(size) {
      this.where.limit = size;
      this.loadProductList();
    },
    handleProductCurrentChange(current) {
      this.where.page = current;
      this.loadProductList();
    },

    // 打开工厂价弹窗
    openFactoryPriceDialog(product) {
      this.currentProduct = product;
      this.factoryPriceDialogVisible = true;
      // 重置选择状态
      this.selectedFactories = {};
      this.deadlineDays = 3;
      this.loadFactoryList();
    },

    // 加载工厂列表
    loadFactoryList() {
      this.factoryListLoading = true;
      // 实际项目中，这里应该调用 merchant.merchantListApi 获取工厂数据
      merchant
        .merchantListApi(this.factoryPage)
        .then((res) => {
          console.log('res2222', res);
          this.factoryList = res.list || [];
          // 更新工厂总条数
          this.factoryListTotal = res.total || 0;
          this.factoryListLoading = false;
          setTimeout(() => {
            this.$nextTick(() => {
              // 全选所有工厂
              if (this.$refs.factoryTable) {
                this.$refs.factoryTable.toggleAllSelection();
              }
              // 默认全选所有工厂到selectedFactories对象
              this.factoryList.forEach((factory) => {
                console.log('factory', factory);

                this.selectedFactories[`${factory.id}`] = true;
              });
            });
          }, 100);
        })
        .catch(() => {
          this.factoryListLoading = false;
          this.factoryList = [];
        });
    },

    // 搜索工厂
    searchFactories() {
      this.factoryPage.page = 1;
      this.loadFactoryList();
    },
    // 多选框选中数据变化时的回调
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      // 更新selectedFactories对象
      this.selectedFactories = {};
      selection.forEach((item) => {
        // 将item.factoryId改为item.id，与表格定义和实际数据结构保持一致
        this.selectedFactories[item.id] = true;
      });
    },
    // 确认选择工厂
    // 确认选择工厂
    confirmSelection() {
      // 获取所有选中的工厂
      const selectedFactoryIds = Object.keys(this.selectedFactories).filter((id) => this.selectedFactories[id]);

      if (selectedFactoryIds.length === 0) {
        this.$message.warning('请至少选择一个工厂');
        return;
      }

      // 计算报价截止时间 - 根据deadlineDays计算具体时间点
      const now = new Date();
      const deadlineDate = new Date(now.getTime() + this.deadlineDays * 24 * 60 * 60 * 1000);
      const offerDeadlineDay = deadlineDate
        .toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false,
        })
        .replace(/\//g, '-');

      const params = {
        noteId: this.currentProduct.noteId,
        merchantIds: selectedFactoryIds, // 改为merchantIds字段
        offerDeadlineDay: offerDeadlineDay, // 改为offerDeadlineDay字段，使用计算出的具体时间
      };
      console.log('params===>', params);

      productFactoryPriceApi(params)
        .then(() => {
          this.$message.success(`已选择${selectedFactoryIds.length}个工厂，报价截止时间为${offerDeadlineDay}`);
          this.loadProductList(); // 刷新产品列表
        })
        .catch(() => {
          this.$message.error('提交工厂报价失败，请重试');
        });

      this.factoryPriceDialogVisible = false;
    },

    // 处理驳回操作 - 修改为打开驳回原因弹窗
    handleReject(product) {
      this.rejectProduct = product;
      this.rejectReason = '';
      this.rejectDialogVisible = true;
    },

    // 确认驳回
    confirmReject() {
      if (!this.rejectReason.trim()) {
        this.$message.warning('请输入驳回原因');
        return;
      }
      let data = {
        productDesignId: this.rejectProduct.productDesignId,
        desAuditState: '3',
        desAuditRemark: this.rejectReason,
      };
      console.log('this.rejectProduct', data);
      productSupplementRejectApi(data)
        .then(() => {
          this.$message.success('驳回成功');
          this.rejectDialogVisible = false;
          this.loadProductList(); // 刷新产品列表
        })
        .catch(() => {
          this.$message.error('驳回失败，请重试');
        });
    },

    // 工厂列表分页处理
    handleFactorySizeChange(size) {
      this.factoryPage.limit = size;
      this.loadFactoryList();
    },
    handleFactoryCurrentChange(current) {
      this.factoryPage.page = current;
      this.loadFactoryList();
    },
    // 添加查询方法
    handleSearch() {
      this.where.page = 1; // 重置为第一页
      this.loadProductList();
    },

    // 添加重置方法
    handleReset() {
      this.where.desAuditState = null;
      this.where.page = 1;
      this.loadProductList();
    },
  },
};
</script>

<style scoped>
.supplement-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.box-card {
  background-color: #fff;
  border-radius: 4px;
}

.three-views {
  display: flex;
  align-items: center;
}

.search-area {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 0;
}

.deadline-area {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.deadline-area span {
  margin: 0 5px;
}

.factory-list {
  max-height: 400px;
  overflow-y: auto;
}

.factory-table {
  border-collapse: collapse;
}

.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
  display: flex;
  justify-content: center;
}

/* 详情抽屉样式 */
.detail-content {
  padding: 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.detail-item label {
  font-weight: bold;
  color: #606266;
  min-width: 100px;
  margin-right: 10px;
}

.detail-item span {
  color: #303133;
  flex: 1;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-image {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  cursor: pointer;
}

.three-views-gallery {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.view-item {
  text-align: center;
}

.view-image {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  cursor: pointer;
}

.view-label {
  margin-top: 8px;
  font-size: 14px;
  color: #606266;
}

.reject-reason {
  color: #f56c6c;
  font-weight: bold;
}
</style>
